<template>
	<view class="room-list-container">

		<!-- 列表 -->
		<view v-if="rooms.length>0">
			
	
		<view class="list-box" v-for="room in rooms" :key="room.houseCode" >
			<view class="list-box-top flex-box" @click="onHouseClick(room)">
				<view class="list-box-top-left  flex-box">
					<view class="group">
						<up-avatar-group :urls="room.userImgs" size="35" gap="0.4"></up-avatar-group>
					</view>
					<view>
						<view>
							<text>房:</text>
							<text>{{room.houseNumber}}</text>
						</view>
						<view class="list-box-top-left-time-item">
							<text></text>
							<text>{{room.createTime}}</text>
						</view>
					</view>
				</view>
				<text class="list-box-top-right-status-item" :style="{color:room.houseStatus === 0?'#5ac725':'#666' }">{{room.houseStatusDes}}</text>
			</view>

		<view class="list-box-btn flex-box" v-if="room.houseStatus===0" @click="closeHouse(room)">
		  <up-button type="primary" text="结算房间" size="small" style="width: 140rpx;margin-left: 0; margin-right: 0;"></up-button>
		</view>
		</view>
			</view>
		<!-- 空数据 -->
		<u-empty v-else mode="list" text="暂无房间" marginTop="100" />

		<!-- 上拉加载 -->
		<!-- <u-loadmore v-if="rooms.length > 0" :status="loadStatus" marginTop="20" /> -->
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		getHouseRecordRequest,
		closeHouseRequest
	} from '/request/house.js';

	import {
		goToInternalPage
	} from '@/utils/jump.js'
	// 模拟数据
	const rooms = ref([])

	// 加载状态：loadmore / loading / nomore
	const loadStatus = ref('nomore')

	// 处理点击房间
	const onHouseClick = (room) => {
		if (room.houseStatus != 0) {
			uni.showToast({
				title: `暂在开发中`,
				icon: 'none'
			})
			return
		}
		uni.showToast({
			title: `进入房间 ${room.houseNumber}`,
			icon: 'none'
		})
		// 跳转房间详情
		goToInternalPage(`house/index?code=${room.houseCode}`);
	}

	// 关闭房间
	const closeHouse = (room) => {
		
		//获取房间数据
		closeHouseRequest({
			"code": room.houseCode
		}).then((res) => {
			if (res.code == 0) {
				uni.showToast({
					type: 'success',
					title: `关闭房间`,
					icon: 'none'
				})
				loadData();
			}else{
				uni.showToast({
					title: res.message,
					icon: 'error',
					duration: 2000
				})
			}
			console.log('成功', res.message);
		}).catch((err) => {
			console.error('失败', err);
		});
	}

	// 模拟加载数据
	const loadData = () => {
		loadStatus.value = 'loading'
		setTimeout(() => {

			//获取房间数据  
			getHouseRecordRequest({
				"pageNumber": 1,
				"rowsPerPage": 10
			}).then((res) => {
				if (res.code == 0) {
					const data = res.rows.map(room => {
						// 提取图片集合
						const userImgs = room.userInfo?.map(detail => detail.imgUrl) || [];

						return {
							...room, // 保留原有属性
							userImgs, // 添加新的图片集合属性
						};
					})
					console.log(data);
					rooms.value = data
					loadStatus.value = 'nomore'
				}
				console.log('成功', res.message);
			}).catch((err) => {
				console.error('失败', err);
			});



		}, 800)
	}

	onMounted(() => {
		loadData()
	})

	// 页面 onLoad 钩子（可选）
	onLoad(() => {
		console.log('房间列表页面加载')
	})
</script>

<style lang="scss" scoped>
	.flex-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex-end {
		justify-content: flex-end;
	}

	.room-list-container {
		background-color: #f8f8f8;
		min-height: 100vh;
		padding-top: var(--status-bar-height);
		.list-box {
			width: 100%;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #e5e5e5;

			.list-box-top {
				width: 100%;
				margin-bottom: 30rpx;
				align-items: flex-start;

				.list-box-top-left {
					width: 80%;
					justify-content: flex-start;
					gap: 20rpx;
					color: #333;

					.group {
						// width: 300rpx;
					}
					
					.list-box-top-left-time-item{
						font-size: 14px;
						margin-top: 2px;
						color: #999;
					}
				}
			}

			.list-box-btn {
				width: 100%;
				justify-content: flex-end;
				
			}
		}
	}

	.room-info {
		display: flex;
		align-items: center;
		margin-top: 6px;
		font-size: 14px;
	}

	.status-row {
		.u-tag {
			margin-left: 4px;
		}
	}
</style>